<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>加密设备状态监控</title>
  <link rel="stylesheet" href="../assets/styles.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="body-bg">
  <header class="header">
    <div class="title datav-title">河北省高速公路联网收费省级密钥资源池管理系统</div>
  </header>
  <div class="layout">
    <aside class="sidebar">
      <!-- <div class="logo">密钥资源池</div> -->
      <div class="logo">加密设备状态监控</div>
      <nav class="menu">
        <a href="../index.html">首页</a>
        <a href="app.html">应用管理</a>
        <a class="active" href="crypto.html">加密设备状态</a>
        <a href="security.html">安全设备状态</a>
        <a href="network.html">部省密钥网络状态</a>
        <a href="jobs.html">定时任务</a>
      </nav>
      <div class="tree">
        <div class="tree-node">
          <div class="tree-header">报表管理<span class="chevron"></span></div>
          <div class="tree-children">
            <a class="tree-link" href="reports.html?tab=app" data-tab="app">服务调用统计</a>
            <a class="tree-link" href="reports.html?tab=crypto" data-tab="crypto">加密设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=security" data-tab="security">安全设备运行监测</a>
            <a class="tree-link" href="reports.html?tab=network" data-tab="network">部省密钥网络运行报表</a>
          </div>
        </div>
      </div>
    </aside>
    <div class="content">
      <main class="container">
    <section class="card">
      <h3>设备列表区</h3>
      <div class="grid cols-4">
        <div class="card success"><div>设备 ID：ENC-001</div><div>型号：SM4-A</div><div>位置：机房A-01</div><div>安全运行时长：3,421 小时</div><div>状态：在线</div><div>最近调用：2025-10-22 09:11</div><div>今日调用：213</div></div>
        <div class="card success"><div>设备 ID：ENC-002</div><div>型号：3DES-B</div><div>位置：机房A-02</div><div>安全运行时长：5,210 小时</div><div>状态：在线</div><div>最近调用：2025-10-22 09:12</div><div>今日调用：198</div></div>
        <div class="card danger"><div>设备 ID：ENC-003</div><div>型号：SM4-C</div><div>位置：机房B-03</div><div>安全运行时长：1,120 小时</div><div>状态：离线</div><div>最近调用：2025-10-21 22:05</div><div>今日调用：0</div></div>
        <div class="card success"><div>设备 ID：ENC-004</div><div>型号：3DES-D</div><div>位置：机房B-04</div><div>安全运行时长：4,002 小时</div><div>状态：在线</div><div>最近调用：2025-10-22 09:09</div><div>今日调用：175</div></div>
      </div>
    </section>

    <section class="grid cols-2" style="margin-top:16px;">
      <div class="card chart-card">
        <h3>调用统计区</h3>
        <div class="chart-box"><canvas id="chartDaily"></canvas></div>
      </div>
      <div>
        <div class="card">
          <h3>调用状态记录（国密）</h3>
          <table class="table" id="tblCryptoSM4">
            <thead><tr><th>接口名称</th><th>算法类型</th><th>调用时间</th><th>结果</th><th>耗时(ms)</th></tr></thead>
            <tbody id="recordsCryptoSM4"></tbody>
          </table>
        </div>
        <div class="card" style="margin-top:12px;">
          <h3>调用状态记录（3DES）</h3>
          <table class="table" id="tblCrypto3DES">
            <thead><tr><th>接口名称</th><th>算法类型</th><th>调用时间</th><th>结果</th><th>耗时(ms)</th></tr></thead>
            <tbody id="recordsCrypto3DES"></tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="card" style="margin-top:16px;">
      <h3>查询接口测试区</h3>
      <button class="button success" id="btnTest">测试加密机状态接口</button>
      <pre id="testResult" style="margin-top:10px; background:#0b1220; padding:12px; border-radius:8px;">点击上方按钮进行测试（成功/失败）</pre>
    </section>
      </main>
    </div>
  </div>

  <script>
    // 昨日调用次数对比（柱状） - 自适应容器高度
    new Chart(document.getElementById('chartDaily'), {
      type: 'bar',
      data: { labels: ['SM4-A','3DES-B','SM4-C','3DES-D'], datasets: [{ label:'昨日调用', data:[320,280,100,250], backgroundColor:'#3b82f6' }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#e5e7eb' } } },
        scales: {
          x: { ticks: { color: '#cbd5e1' }, grid: { color: 'rgba(148,163,184,0.12)' } },
          y: { ticks: { color: '#cbd5e1' }, grid: { color: 'rgba(148,163,184,0.12)' } }
        }
      }
    });

    // 设备列表区：为每个设备卡片首行添加“设备名称”（随机：国密加密机 / 3DES加密机）
    (function addDeviceNames(){
      const namePool = ['国密加密机','3DES加密机'];
      const section = Array.from(document.querySelectorAll('section.card')).find(s => s.querySelector('h3')?.textContent.trim() === '设备列表区');
      if (!section) return;
      const cards = section.querySelectorAll('.grid.cols-4 .card');
      cards.forEach(card => {
        const name = namePool[Math.floor(Math.random() * namePool.length)];
        const div = document.createElement('div');
        div.textContent = `设备名称：${name}`;
        card.insertBefore(div, card.firstElementChild);
      });
    })();

    // 时间格式化：yyyy-MM-dd HH:mm:ss
    function formatDateTime(dt){
      const pad = n => String(n).padStart(2, '0');
      return `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}:${pad(dt.getSeconds())}`;
    }

    // 测试接口模拟
    document.getElementById('btnTest').addEventListener('click', () => {
      const ok = Math.random() > 0.2;
      const now = new Date();
      const result = ok ? { status: '成功', timestamp: formatDateTime(now) } : { status: '失败', timestamp: formatDateTime(now) };
      document.getElementById('testResult').textContent = JSON.stringify(result, null, 2);
    });

    // 调用状态记录列表：按算法类型拆分为国密与 3DES，两块各展示5条
    (function initCryptoList(){
      const $tbodySM4 = document.getElementById('recordsCryptoSM4');
      const $tbody3DES = document.getElementById('recordsCrypto3DES');
      if (!$tbodySM4 || !$tbody3DES) return;

      const sm4Apis = [
        '单片国密替换ESAM内的密钥',
        '单片国密更新ESAM内文件内容的MAC计算',
        '单片国密更新卡片内的密钥',
        '单片国密更新卡片内文件信息',
        '双片国密替换ESAM内的密钥'
      ];
      const threeDesApis = [
        '3DES设备替换ESAM内的密钥',
        '3DES设备更新ESAM内文件内容的MAC计算',
        '3DES设备更新卡片内的密钥',
        '3DES设备更新卡片内文件信息',
        '3DES设备计算卡片mac'
      ];

      const records = Array.from({ length: 120 }, (_,i) => {
        const alg = Math.random() > 0.5 ? 'SM4' : '3DES';
        const apis = alg === 'SM4' ? sm4Apis : threeDesApis;
        const api = apis[Math.floor(Math.random() * apis.length)];
        const ok = Math.random() > 0.25; // 75% 成功
        const dt = new Date(Date.now() - Math.floor(Math.random()*30)*86400000 - Math.floor(Math.random()*24)*3600000);
        const fmt = `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')} ${String(dt.getHours()).padStart(2,'0')}:${String(dt.getMinutes()).padStart(2,'0')}`;
        return { api, alg, timeText: fmt, result: ok ? '成功' : '失败', duration: Math.floor(20+Math.random()*80) };
      });

      const rowsSM4 = records.filter(r => r.alg === 'SM4').slice(0, 5);
      const rows3DES = records.filter(r => r.alg === '3DES').slice(0, 5);

      const renderRow = r => `<tr><td>${r.api}</td><td>${r.alg}</td><td>${r.timeText}</td><td>${r.result}</td><td>${r.duration}</td></tr>`;
      $tbodySM4.innerHTML = rowsSM4.map(renderRow).join('');
      $tbody3DES.innerHTML = rows3DES.map(renderRow).join('');
    })();
  </script>
  <script>
    const th = document.querySelector('.tree-header');
    if (th) th.addEventListener('click', () => th.parentElement.classList.toggle('expanded'));
  </script>
</body>
</html>